<script setup>

</script>

<template>
  <div>
    <h3>使用layout组件进行元素布局</h3>
<!--    需要注意的是：vue的栅格也是每行24格-->
    <el-row>
      <el-col :span="12"><div style="border: 1px black solid;">占用12格</div></el-col> <!--这里的span表示这个元素占用多少格-->
      <el-col :span="12"><div style="border: 1px black solid;">占用12格</div></el-col>
    </el-row>
    <br>
    <h3>不均匀使用24个格子</h3>
    <el-row>
      <el-col :span="6"><div style="border: 1px black solid;">占用6格</div></el-col> <!--这里的span表示这个元素占用多少格-->
      <el-col :span="12"><div style="border: 1px black solid;">占用12格</div></el-col>
      <el-col :span="6"><div style="border: 1px black solid;">占用6格</div></el-col> <!--这里的span表示这个元素占用多少格-->
    </el-row>
    <br>
    <h3>使用layout组件中的属性</h3>
    <h4 style="text-align: left">使格子之间有一定间距</h4>
    <el-row :gutter="5">
      <el-col :span="12"><div style="border: 1px black solid;" >占用12格</div></el-col> <!--这里的span表示这个元素占用多少格-->
      <el-col :span="12"><div style="border: 1px black solid;">占用12格</div></el-col>
    </el-row>
    <h4 style="text-align: left">指定存放元素的容器（默认是div）</h4>
    <el-row tag="span">
      <el-col :span="12"><div style="border: 1px black solid;" >占用12格</div></el-col> <!--这里的span表示这个元素占用多少格-->
      <el-col :span="12"><div style="border: 1px black solid;">占用12格</div></el-col>
    </el-row>
    <h4 style="text-align: left">指定格子的偏移量</h4>
    <el-row>
      <el-col :span="12" :offset="6"><div style="border: 1px black solid;">占用12格</div></el-col> <!--这里的span表示这个元素占用多少格-->
    </el-row>
    <h4 style="text-align: left">指定格子的偏移量(和前面的offset属性有点区别，就是当空间不够的时候，一个会另起一行，一个不会从而导致多个元素在一行叠加出现)</h4>
    <el-row>
<!--push相当于右浮动，offset则相当于margin-->
      <el-col :span="12" :push="6"><div style="border: 1px black solid;">占用12格</div></el-col> <!--这里的span表示这个元素占用多少格-->
    </el-row>

  </div>

</template>

<style scoped>

</style>
